<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>主菜单</title>
<link rel="stylesheet" href="../static/bootstrap-4.1.1/bootstrap.min.css" >

<style type="text/css">

html{
	height:100%;
}

body{
	height:100%;
	padding:0;
	margin:0;
}

.my-title{
	position: fixed;/*固定定位*/
	left:0;
	top:0;
	width:100%;
	height:50px;
	background-color:#223377;
	
	color:#FFFFFF;
	font-size:26px;
	font-weight:bold;
	font-family: 楷体;
	line-height:50px;
	padding-left:5px;

}

.my-nav{
	position: fixed;/*固定定位*/
	left:0;
	top:50px;
	bottom:30px;
	
	width:149px;
	
	
	background-color:#EEEEEE;
	
	border-right:solid 1px #CCCCCC;

}

.my-content{

	position: fixed;/*固定定位*/
	left:150px;
	right:0;
	top:50px;
	bottom:30px;
	background-color:#CCFFDD;

}

.my-copyright{
	position: fixed;/*固定定位*/
	left:0;	
	bottom:0px;
	
	height:30px;
	width:100%;
	
	
	background-color:#223377;

}

#curr-user{
	position: absolute;
	right:10px;
	bottom:5px;
	
	font-size:14px;
	line-height:20px;
	color:white;
	font-family:宋体;
}

.sub-menu-item{	
	display: block;
	line-height:30px;
	font-size:13px;
	text-decoration: none;
	padding-left:20px;
	border-radius:10px;
	color:#223388;
}
.sub-menu-item:hover{
	text-decoration: none;
	background-color: #DDFFFF;
	font-weight: bold;	
}

.main-menu-item{

	font-size:14px;
	
	color:#223388;
	text-decoration: none;
}
.main-menu-item:hover{

	
	font-weight: bold;	
	
	text-decoration: none;
}

.my-content iframe{
	width:100%;
	height:100%;
	border:none;
}

</style>


</head>
<body>

<div class="my-title">
	XXX云信息系统
	<div id="curr-user">当前用户：XXX</div>
</div>
<div class="my-nav">

<div class="accordion" id="my-menu">
 
 <c:forEach items="${menuList }" var="main">
 
  <div class="card">
    <div class="card-header" id="main-${main.menuId}">
      
        <a class="main-menu-item" style="cursor: pointer;"  data-toggle="collapse" data-target="#sub-menu-${main.menuId}">
          	${main.menuName }
        </a>
      
    </div>

    <div id="sub-menu-${main.menuId}" class="collapse"  data-parent="#my-menu">
      <div class="card-body">
      	<c:forEach items="${main.subMenuList }" var="sub">
        	<a class="sub-menu-item" href="..${sub.menuUrl }" target="my-content"  >${sub.menuName }</a>        
        </c:forEach>
      </div>
    </div>
  </div>
  
 </c:forEach>  
  
  
</div>


</div>
<div class="my-content"><iframe name="my-content"></iframe></div>
<div class="my-copyright"></div>


<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/popper-1.14.3.min.js" ></script>
<script src="../static/bootstrap-4.1.1/bootstrap.min.js" ></script>


</body>
</html>